<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>

    <title>代码模板</title>
    <style>
        /*保证高度100%*/
        html,body,.app{
            height: 100%;
            margin: 0px;
        }

        /*菜单紧凑些*/
        .menu-item-style{
            height: 40px;
        }
    </style>
</head>
<body class="skin-default">
<div id="app" style="height: 100%;">

    <el-container style="height: 100%;">
        <el-aside width="230px" style="border-right: #eee solid 1px;padding: 0px;position: relative;">
            <el-container style="position: relative;height: 100%;">
                <el-header style="height: auto;">
                    <div style="width: 100%;height: 40px;color: #999;padding-top: 15px;">
                        代码模板列表
                    </div>
                </el-header>
                <el-main style="padding: 0px;">
                    <el-scrollbar>
<!--                        @open="handleOpen" @close="handleClose" -->
                        <el-menu default-active="2"

                                 style="border: none;">
                            <el-menu-item :index="idx+''" class="menu-item-style" v-for="(temp, idx) in formData.templateItemList" @click="templateClick(temp)">
                                <el-icon>
                                    <i class="fa fa-file-text" aria-hidden="true"></i>
                                </el-icon>
                                <span>{{ temp.name }}</span>
                            </el-menu-item>
                        </el-menu>
                        <span style="color: #111111;padding: 20px;" v-if="!formData || !formData.templateItemList || formData.templateItemList.length==0">暂无模板~</span>
                    </el-scrollbar>
                </el-main>
                <el-footer style="display: inline-flex;bottom: 0px;height: auto;">
                    <div style="text-align: center;width: 100%;height: 40px;">
                        <el-button type="text" @click="addTemplate"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;添加模板</el-button>
                    </div>
                </el-footer>
            </el-container>

        </el-aside>
        <el-main>
            <el-scrollbar>
                <div class="grid-content" style="padding-right: 20px;">
                    <el-form ref="templateFormRef" :model="templateData" :rules="templateRules" label-width="100px">
                        <el-form-item label="模板名称" prop="name">
                            <el-input v-model="templateData.name" placeholder="模板名称"></el-input>
                        </el-form-item>
                        <el-form-item label="代码模板" prop="templateContent">
                            <el-input v-model="templateData.templateContent" type="textarea" :rows="10"
                                      placeholder="代码模板"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="insert" v-if="!templateId"><i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;添加模板</el-button>
                        <el-button type="success" @click="update" v-if="templateId"><i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;更新</el-button>
                        <el-button type="danger" @click="deleteTemplate" v-if="templateId"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除</el-button>
                    </div>

                </div>
            </el-scrollbar>
        </el-main>
    </el-container>

</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">

    const app = Vue.createApp({
        data: function () {
            return {
                // 模板组id
                id: jo.getDefVal(jo.getUrlParam('id')),
                formDataUrl: '{URL_CMS}cms/templateGroup/detail',
                formData: {},
                formRules: {},

                // 选中的模板id
                templateId: '',
                templateInsertUrl: '{URL_CMS}cms/templateItem/insert',
                templateUpdateUrl: '{URL_CMS}cms/templateItem/update',
                templateDeleteUrl: '{URL_CMS}cms/templateItem/delete',
                // 模板数据
                templateData: {},
                // 模板数据校验规则
                templateRules: {
                    name: [
                        {
                            required: true,
                            message: '请输入模板名称',
                            trigger: 'blur',
                        },
                        {
                            min: 1,
                            max: 100,
                            message: '模板名称请控制在100个字符以内',
                            trigger: 'blur',
                        }
                    ],
                    templateContent: [
                        {
                            required: true,
                            message: '请输入模板内容',
                            trigger: 'blur',
                        }
                    ]
                }

            }
        }
        , computed: {}
        , methods: {
            // 刷新
            refresh() {
                var _this = this;
                // _this.formData = {};
                jo.postAjax(this.formDataUrl, {id: this.id}, function (json) {
                    if (json && json.code === 0) {
                        _this.formData = json._data;
                    }
                }, true);
            },
            // 初始化
            initApp() {
                this.refresh();
            },
            // 模板点击
            templateClick(template){
                this.templateData = template;
                this.templateId = template.id;
            },
            insert() {
                var _this = this;
                this.$refs.templateFormRef.validate(function (success, object) {// success表示校验是否通过, object表示校验失败的字段: {name: [{message: "请输入模板组名称", fieldValue: undefined, field: "name"}]}
                    if (success) {
                        _this.templateData['templateGroupId'] = _this.id;
                        jo.postAjax(_this.templateInsertUrl, _this.templateData, function (json) {
                            if (json && json.code === 0) {
                                jo.showSuccessMsg('添加成功~');
                                _this.refresh();
                                _this.templateData = {};
                                _this.templateId = '';
                            }
                        }, true);
                    }
                });

            },
            update() {
                var _this = this;
                this.$refs.templateFormRef.validate(function (success, object) {// success表示校验是否通过, object表示校验失败的字段: {name: [{message: "请输入模板组名称", fieldValue: undefined, field: "name"}]}
                    if (success) {
                        _this.templateData['id'] = _this.templateId;
                        _this.templateData['templateGroupId'] = _this.id;
                        jo.postAjax(_this.templateUpdateUrl, _this.templateData, function (json) {
                            if (json && json.code === 0) {
                                jo.showSuccessMsg('更新成功~');
                                _this.refresh();
                                _this.templateData = {};
                                _this.templateId = '';
                            }
                        }, true);
                    }
                });
            },
            deleteTemplate() {
                if (!this.templateId) {
                    jo.showErrorMsg('操作失败~');
                    return;
                }
                var _this = this;
                jo.confirm('您确定要删除此模板嘛?', function () {
                    jo.postAjax(_this.templateDeleteUrl, {id: _this.templateId}, function (json) {
                        if (json && json.code === 0) {
                            jo.showSuccessMsg('删除成功~');
                            _this.refresh();
                            _this.templateData = {};
                            _this.templateId = '';
                        }
                    }, true);
                });
            },
            // 添加模板
            addTemplate() {
                this.templateData = {};
                this.templateId = '';
            }
        }
        , mounted() {
            this.initApp();
        }
        , setup() {
            console.info('setup');
        }
    });
    app.use(ElementPlus, {});
    var appVM = app.mount("#app");
</script>

</body>
</html>
